<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
	html,body{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
}
    /*日期*/
    body .el-date-picker {
        width: 720px;
        .el-picker-panel__content {
            width: 100%;
        }
        .el-date-picker__header-label {
            font-size: 26px;
        }
    }
</style>

<!-- <template>
   <div id="app">
	 <el-input v-model='form.name' @input="onInputChange"></el-input>
     <SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="form.name"/>
   </div>
 </template>
 
 <script>
 import SimpleKeyboard from "@/views/SimpleKeyboard";
 
 export default {
   name: "App",
   components: {
     SimpleKeyboard
   },
   data: () => ({
     input: "",
	 form:{
		 name:''
	 }
   }),
   methods: {
     onChange(input) {
       this.form.name = input;
     },
     onKeyPress(button) {
       console.log("button", button);
     },
     onInputChange(input) {
       this.form.name = input.target.value;
     }
   }
 };
 </script>
 
 <style>
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 </style>
 -->